@kodiak-finance/orderly-trading-leaderboard 2.8.22-beta.1 → 2.8.22-beta.3

package/dist/index.d.mts

@@ -168,7 +168,7 @@ type TradingListWidgetProps = Pick<TradingListProps, "style" | "className">;
  */
 declare const TradingListWidget: FC<TradingListWidgetProps>;
 
-type RankingColumnFields = "rank" | "address" | "volume" | "pnl" | "rewards" | "points";
+type RankingColumnFields = "rank" | "address" | "tier" | "volume" | "pnl" | "rewards" | "points";
 
 type ListStyle = "disc" | "decimal" | "none" | "circle" | "square" | "decimal-leading-zero" | "lower-alpha" | "upper-alpha" | "lower-roman" | "upper-roman";
 type DescriptionItem = {
@@ -421,6 +421,33 @@ type GeneralRankingData = {
     perp_volume: number;
     realized_pnl: number;
     total_fee: number;
+    vip_tier?: string;
+    vipTier?: string;
+    vip_tier_name?: string;
+    vipTierName?: string;
+    vip_badge_url?: string;
+    vipBadgeUrl?: string;
+    vip_tier_image?: string;
+    vipTierImage?: string;
+    vip_tier_badge?: string;
+    vipTierBadge?: string;
+    tier?: string | {
+        name?: string;
+        label?: string;
+        tier?: string;
+        badge_url?: string;
+        badgeUrl?: string;
+        image?: string;
+        imageUrl?: string;
+    };
+    tier_name?: string;
+    tierName?: string;
+    tier_label?: string;
+    tierLabel?: string;
+    tier_image?: string;
+    tierImage?: string;
+    tier_badge_url?: string;
+    tierBadgeUrl?: string;
     key?: string;
     rank?: number | string;
     volume?: number;
@@ -433,6 +460,7 @@ type GeneralRankingScriptOptions = {
     address?: string;
     sortKey?: "perp_volume" | "realized_pnl";
     leaderboardEndpoint?: string;
+    foxifyOnly?: boolean;
 };
 declare function useGeneralRankingScript(options?: GeneralRankingScriptOptions): {
     pagination: _kodiak_finance_orderly_ui.PaginationMeta;
@@ -493,6 +521,8 @@ declare function useGeneralLeaderboardScript(options?: GeneralLeaderboardScriptO
     useCampaignDateRange: boolean;
     weeklyRanges: WeeklyDateRange[];
     currentOrAllTimeRange: WeeklyDateRange | undefined;
+    foxifyOnly: any;
+    setFoxifyOnly: (value: boolean) => void;
     searchValue: string;
     onSearchValueChange: (value: string) => void;
     clearSearchValue: () => void;
@@ -544,8 +574,9 @@ declare const CampaignLeaderboardWidget: FC<CampaignLeaderboardWidgetProps>;
 
 interface KodiakStatsProps {
     dateRange?: DateRange;
+    foxifyOnly?: boolean;
 }
-declare const BrokerStatsWidget: ({ dateRange }: KodiakStatsProps) => react_jsx_runtime.JSX.Element;
+declare const BrokerStatsWidget: ({ dateRange, foxifyOnly, }: KodiakStatsProps) => react_jsx_runtime.JSX.Element;
 
 type LeaderboardPageProps = GeneralLeaderboardWidgetProps & TradingLeaderboardProviderProps & {
     style?: React.CSSProperties;

package/dist/index.d.ts

@@ -168,7 +168,7 @@ type TradingListWidgetProps = Pick<TradingListProps, "style" | "className">;
  */
 declare const TradingListWidget: FC<TradingListWidgetProps>;
 
-type RankingColumnFields = "rank" | "address" | "volume" | "pnl" | "rewards" | "points";
+type RankingColumnFields = "rank" | "address" | "tier" | "volume" | "pnl" | "rewards" | "points";
 
 type ListStyle = "disc" | "decimal" | "none" | "circle" | "square" | "decimal-leading-zero" | "lower-alpha" | "upper-alpha" | "lower-roman" | "upper-roman";
 type DescriptionItem = {
@@ -421,6 +421,33 @@ type GeneralRankingData = {
     perp_volume: number;
     realized_pnl: number;
     total_fee: number;
+    vip_tier?: string;
+    vipTier?: string;
+    vip_tier_name?: string;
+    vipTierName?: string;
+    vip_badge_url?: string;
+    vipBadgeUrl?: string;
+    vip_tier_image?: string;
+    vipTierImage?: string;
+    vip_tier_badge?: string;
+    vipTierBadge?: string;
+    tier?: string | {
+        name?: string;
+        label?: string;
+        tier?: string;
+        badge_url?: string;
+        badgeUrl?: string;
+        image?: string;
+        imageUrl?: string;
+    };
+    tier_name?: string;
+    tierName?: string;
+    tier_label?: string;
+    tierLabel?: string;
+    tier_image?: string;
+    tierImage?: string;
+    tier_badge_url?: string;
+    tierBadgeUrl?: string;
     key?: string;
     rank?: number | string;
     volume?: number;
@@ -433,6 +460,7 @@ type GeneralRankingScriptOptions = {
     address?: string;
     sortKey?: "perp_volume" | "realized_pnl";
     leaderboardEndpoint?: string;
+    foxifyOnly?: boolean;
 };
 declare function useGeneralRankingScript(options?: GeneralRankingScriptOptions): {
     pagination: _kodiak_finance_orderly_ui.PaginationMeta;
@@ -493,6 +521,8 @@ declare function useGeneralLeaderboardScript(options?: GeneralLeaderboardScriptO
     useCampaignDateRange: boolean;
     weeklyRanges: WeeklyDateRange[];
     currentOrAllTimeRange: WeeklyDateRange | undefined;
+    foxifyOnly: any;
+    setFoxifyOnly: (value: boolean) => void;
     searchValue: string;
     onSearchValueChange: (value: string) => void;
     clearSearchValue: () => void;
@@ -544,8 +574,9 @@ declare const CampaignLeaderboardWidget: FC<CampaignLeaderboardWidgetProps>;
 
 interface KodiakStatsProps {
     dateRange?: DateRange;
+    foxifyOnly?: boolean;
 }
-declare const BrokerStatsWidget: ({ dateRange }: KodiakStatsProps) => react_jsx_runtime.JSX.Element;
+declare const BrokerStatsWidget: ({ dateRange, foxifyOnly, }: KodiakStatsProps) => react_jsx_runtime.JSX.Element;
 
 type LeaderboardPageProps = GeneralLeaderboardWidgetProps & TradingLeaderboardProviderProps & {
     style?: React.CSSProperties;

package/dist/index.js

@@ -2,8 +2,8 @@
 
 var dateFns = require('date-fns');
 var react = require('react');
-var orderlyI18n = require('@kodiak-finance/orderly-i18n');
 var orderlyHooks = require('@kodiak-finance/orderly-hooks');
+var orderlyI18n = require('@kodiak-finance/orderly-i18n');
 var orderlyUi = require('@kodiak-finance/orderly-ui');
 var jsxRuntime = require('react/jsx-runtime');
 var lucideReact = require('lucide-react');
@@ -237,7 +237,7 @@ var init_util = __esm({
   "src/components/ranking/shared/util.ts"() {
   }
 });
-var useRankingColumns, FirstRankIcon, SecondRankIcon, ThirdRankIcon, PnLColumnTitle, VolumeColumnTitle, PointsColumnTitle;
+var useRankingColumns, getTierInfo, TierBadge, FirstRankIcon, SecondRankIcon, ThirdRankIcon, PnLColumnTitle, VolumeColumnTitle, PointsColumnTitle;
 var init_column = __esm({
   "src/components/ranking/shared/column.tsx"() {
     init_first_badge();
@@ -300,7 +300,7 @@ var init_column = __esm({
               if (!isYou) {
                 if (record.rank === 1) ; else if (record.rank === 2) ; else if (record.rank === 3) ;
               }
-              return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+              return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-flex oui-flex-col", children: /* @__PURE__ */ jsxRuntime.jsxs(
                 "a",
                 {
                   className: "oui-flex oui-items-start oui-gap-1",
@@ -331,6 +331,18 @@ var init_column = __esm({
             },
             width: 90
           },
+          {
+            title: "VIP Tier",
+            dataIndex: "tier",
+            render: (_value, record) => {
+              const tierInfo = getTierInfo(record);
+              if (!tierInfo?.label) {
+                return "-";
+              }
+              return /* @__PURE__ */ jsxRuntime.jsx(TierBadge, { label: tierInfo.label, imageUrl: tierInfo.imageUrl });
+            },
+            width: 120
+          },
           {
             title: /* @__PURE__ */ jsxRuntime.jsx(VolumeColumnTitle, {}),
             dataIndex: "volume",
@@ -396,6 +408,46 @@ var init_column = __esm({
         );
       }, [t, isMobile, address, fields, enableSort, type]);
     };
+    getTierInfo = (record) => {
+      if (!record) {
+        return {};
+      }
+      const tierValue = record.tier;
+      if (tierValue && typeof tierValue === "object") {
+        return {
+          label: tierValue.name || tierValue.label || tierValue.tier,
+          imageUrl: tierValue.badge_url || tierValue.badgeUrl || tierValue.image || tierValue.imageUrl
+        };
+      }
+      const label = record.vip_tier || record.vipTier || record.vip_tier_name || record.vipTierName || record.tier || record.tier_name || record.tierName || record.tier_label || record.tierLabel;
+      const imageUrl = record.vip_badge_url || record.vipBadgeUrl || record.vip_tier_image || record.vipTierImage || record.vip_tier_badge || record.vipTierBadge || record.tier_image || record.tierImage || record.tier_badge_url || record.tierBadgeUrl;
+      return { label, imageUrl };
+    };
+    TierBadge = ({
+      label,
+      imageUrl,
+      className
+    }) => {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        orderlyUi.Flex,
+        {
+          itemAlign: "center",
+          gap: 1,
+          className: orderlyUi.cn("oui-text-2xs", className),
+          children: [
+            imageUrl && /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: imageUrl,
+                alt: `${label} badge`,
+                className: "oui-h-4 oui-w-4 oui-object-contain"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { className: "oui-text-2xs", children: label })
+          ]
+        }
+      );
+    };
     FirstRankIcon = () => {
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "svg",
@@ -666,7 +718,8 @@ function useGeneralRankingScript(options) {
     dateRange = exports.getDateRange(90),
     address: searchValue,
     sortKey = "perp_volume",
-    leaderboardEndpoint
+    leaderboardEndpoint,
+    foxifyOnly = false
   } = options || {};
   const [initialSort] = react.useState({
     sortKey,
@@ -714,6 +767,9 @@ function useGeneralRankingScript(options) {
     if (args.address) {
       searchParams.set("address", args.address);
     }
+    if (foxifyOnly) {
+      searchParams.set("foxify_only", "true");
+    }
     const baseUrl = leaderboardEndpoint || `/v1/broker/leaderboard/daily`;
     return `${baseUrl}?${searchParams.toString()}`;
   };
@@ -1028,12 +1084,13 @@ var init_generalRanking_widget = __esm({
     init_ranking_ui();
     init_generalRanking_script();
     exports.GeneralRankingWidget = (props) => {
-      const { dateRange, address, fields, sortKey, leaderboardEndpoint, ...rest } = props;
+      const { dateRange, address, fields, sortKey, leaderboardEndpoint, foxifyOnly, ...rest } = props;
       const state = useGeneralRankingScript({
         dateRange,
         address,
         sortKey,
-        leaderboardEndpoint
+        leaderboardEndpoint,
+        foxifyOnly
       });
       return /* @__PURE__ */ jsxRuntime.jsx(exports.Ranking, { ...state, ...rest, fields, type: "general" });
     };
@@ -1069,23 +1126,23 @@ var TradingLeaderboardProvider = (props) => {
 var useTradingLeaderboardContext = () => {
   return react.useContext(TradingLeaderboardContext);
 };
-var API_BASE = "https://backend.kodiak.finance/orderly/stats";
+var API_BASE = "https://staging.backend.kodiak.finance/orderly/stats";
 var formatDateLocal = (date) => {
   const year = date.getFullYear();
   const month = String(date.getMonth() + 1).padStart(2, "0");
   const day = String(date.getDate()).padStart(2, "0");
   return `${year}-${month}-${day}`;
 };
-var getApiUrl = (dateRange) => {
+var getApiUrl = (dateRange, foxifyOnly) => {
   if (!dateRange?.from || !dateRange?.to) {
     const today = /* @__PURE__ */ new Date();
     const startDate2 = formatDateLocal(today);
     const endDate2 = formatDateLocal(today);
-    return `${API_BASE}?start_date=${startDate2}&end_date=${endDate2}`;
+    return `${API_BASE}?start_date=${startDate2}&end_date=${endDate2}${foxifyOnly ? "&foxify_only=true" : ""}`;
   }
   const startDate = formatDateLocal(dateRange.from);
   const endDate = formatDateLocal(dateRange.to);
-  return `${API_BASE}?start_date=${startDate}&end_date=${endDate}`;
+  return `${API_BASE}?start_date=${startDate}&end_date=${endDate}${foxifyOnly ? "&foxify_only=true" : ""}`;
 };
 var customFetcher = async (url) => {
   const response = await fetch(url);
@@ -1112,11 +1169,14 @@ var formatCurrency = (num, showSign = false) => {
   }
   return formatted;
 };
-var BrokerStatsWidget = ({ dateRange }) => {
+var BrokerStatsWidget = ({
+  dateRange,
+  foxifyOnly
+}) => {
   const { isMobile } = orderlyUi.useScreen();
   const url = react.useMemo(
-    () => getApiUrl(dateRange),
-    [dateRange?.from, dateRange?.to]
+    () => getApiUrl(dateRange, foxifyOnly),
+    [dateRange?.from, dateRange?.to, foxifyOnly]
   );
   const {
     data: apiData,
@@ -3102,6 +3162,18 @@ var LeaderboardTab = /* @__PURE__ */ ((LeaderboardTab2) => {
 
 // src/components/leaderboard/generalLeaderboard/generalLeaderboard.script.ts
 init_utils();
+var useLeaderboardLocalStorage = () => {
+  const [foxifyOnly, setFoxifyOnly] = orderlyHooks.useLocalStorage(
+    "leaderboard_foxify_only",
+    false
+  );
+  return {
+    foxifyOnly,
+    setFoxifyOnly
+  };
+};
+
+// src/components/leaderboard/generalLeaderboard/generalLeaderboard.script.ts
 var FilterDays2 = [1, 7, 30, 90];
 function useGeneralLeaderboardScript(options) {
   const { campaignDateRange, timeRange } = options || {};
@@ -3124,12 +3196,14 @@ function useGeneralLeaderboardScript(options) {
     customTimeRange: parsedTimeRange
   });
   const searchState = useSearch();
+  const foxifyState = useLeaderboardLocalStorage();
   const useCampaignDateRange = react.useMemo(() => {
     return !!campaignDateRange;
   }, [campaignDateRange]);
   return {
     ...filterState,
     ...searchState,
+    ...foxifyState,
     activeTab,
     onTabChange: setActiveTab,
     useCampaignDateRange,
@@ -3283,6 +3357,17 @@ var LeaderboardFilter = (props) => {
       value
     );
   });
+  const foxifyFilterButton = /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      className: `oui-px-3 oui-py-1 oui-rounded oui-text-xs oui-font-medium oui-transition-colors oui-whitespace-nowrap ${props.foxifyOnly ? "oui-bg-primary oui-text-white" : "oui-bg-base-6 oui-text-base-contrast-60 hover:oui-bg-base-4 hover:oui-text-base-contrast"}`,
+      onClick: () => {
+        props.setFoxifyOnly(!props.foxifyOnly);
+      },
+      title: t("tradingLeaderboard.foxifyOnly.tooltip"),
+      children: t("tradingLeaderboard.foxifyOnly")
+    }
+  );
   if (isMobile) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       orderlyUi.Flex,
@@ -3295,6 +3380,7 @@ var LeaderboardFilter = (props) => {
         className: orderlyUi.cn("oui-mobile-trading-leaderboard-ranking-filter"),
         children: [
           input,
+          /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Flex, { gap: 2, width: "100%", mt: 3, itemAlign: "center", children: foxifyFilterButton }),
           useCampaignDateRange ? /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Flex, { gap: 3, className: "oui-w-full oui-py-3", children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.ScrollIndicator, { className: "oui-w-full", children: weeklyView }) }) : /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { gap: 3, className: "oui-w-full", children: [
             dateRangeView,
             /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.ScrollIndicator, { className: "oui-w-full", children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Flex, { gap: 3, children: filterDayView }) })
@@ -3316,7 +3402,10 @@ var LeaderboardFilter = (props) => {
           !useCampaignDateRange && dateRangeView,
           !useCampaignDateRange && filterDayView
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { width: 240, children: input })
+        /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { gap: 2, itemAlign: "center", children: [
+          foxifyFilterButton,
+          /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { width: 240, children: input })
+        ] })
       ]
     }
   );
@@ -3464,12 +3553,8 @@ var GeneralLeaderboard = (props) => {
         props.activeTab === "volume" /* Volume */ ? "volume" : "pnl"
       ];
     }
-    const baseFields = [
-      "rank",
-      "address",
-      "volume",
-      "pnl"
-    ];
+    const baseFields = ["rank", "address"];
+    baseFields.push("volume", "pnl");
     if (props.leaderboardEndpoint) {
       baseFields.push("points");
     }
@@ -3477,7 +3562,13 @@ var GeneralLeaderboard = (props) => {
   }, [isMobile, props.activeTab, props.leaderboardEndpoint]);
   if (isMobile) {
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(BrokerStatsWidget, { dateRange: props.dateRange }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        BrokerStatsWidget,
+        {
+          dateRange: props.dateRange,
+          foxifyOnly: props.foxifyOnly
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsxs(
         orderlyUi.Box,
         {
@@ -3510,7 +3601,8 @@ var GeneralLeaderboard = (props) => {
                 address: props.searchValue,
                 sortKey: props.activeTab === "volume" /* Volume */ ? "perp_volume" : "realized_pnl",
                 fields,
-                leaderboardEndpoint: props.leaderboardEndpoint
+                leaderboardEndpoint: props.leaderboardEndpoint,
+                foxifyOnly: props.foxifyOnly
               }
             ) })
           ]
@@ -3519,7 +3611,13 @@ var GeneralLeaderboard = (props) => {
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(BrokerStatsWidget, { dateRange: props.dateRange }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      BrokerStatsWidget,
+      {
+        dateRange: props.dateRange,
+        foxifyOnly: props.foxifyOnly
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs(
       orderlyUi.Box,
       {
@@ -3542,7 +3640,8 @@ var GeneralLeaderboard = (props) => {
               dateRange: props.dateRange,
               address: props.searchValue,
               fields,
-              leaderboardEndpoint: props.leaderboardEndpoint
+              leaderboardEndpoint: props.leaderboardEndpoint,
+              foxifyOnly: props.foxifyOnly
             }
           ) })
         ]
@@ -7589,7 +7688,13 @@ var LeaderboardSection = (props) => {
   if (currentCampaignId === "general") {
     return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Box, { px: 3, className: orderlyUi.cn("oui-mix-blend-screen"), children: [
       /* @__PURE__ */ jsxRuntime.jsx(LeaderboardBackground, { backgroundSrc }),
-      /* @__PURE__ */ jsxRuntime.jsx(BrokerStatsWidget, { dateRange: memoizedDateRange }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        BrokerStatsWidget,
+        {
+          dateRange: memoizedDateRange,
+          foxifyOnly: leaderboardScript.foxifyOnly
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(
         GeneralLeaderboard,
         {
@@ -7601,7 +7706,13 @@ var LeaderboardSection = (props) => {
   }
   if (currentCampaign?.leaderboard_config?.use_general_leaderboard) {
     return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Box, { px: 3, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(BrokerStatsWidget, { dateRange: memoizedDateRange }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        BrokerStatsWidget,
+        {
+          dateRange: memoizedDateRange,
+          foxifyOnly: leaderboardScript.foxifyOnly
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(
         LeaderboardTitle,
         {
@@ -7622,7 +7733,13 @@ var LeaderboardSection = (props) => {
   }
   if (currentCampaign && !currentCampaign.hide_arena && currentCampaignId != "general") {
     return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Box, { px: 3, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(BrokerStatsWidget, { dateRange: memoizedDateRange }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        BrokerStatsWidget,
+        {
+          dateRange: memoizedDateRange,
+          foxifyOnly: leaderboardScript.foxifyOnly
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(
         LeaderboardTitle,
         {